<template>
    <div>
        <el-scrollbar height="100vh">
            <CartTopStepsComponent :current="1"></CartTopStepsComponent>
            <a-collapse v-model:activeKey="activeKey" bordered style="text-align: left">
                <a-collapse-panel key="1" :show-arrow="false" header="收货人信息">
                    <a-descriptions bordered>
                        <a-descriptions-item label="姓名">{{ orderDetailInfo.memberAddress[0].name }}
                        </a-descriptions-item>
                        <a-descriptions-item label="手机号">{{ orderDetailInfo.memberAddress[0].phone }}
                        </a-descriptions-item>
                        <a-descriptions-item label="邮政编码">{{ orderDetailInfo.memberAddress[0].postCode }}
                        </a-descriptions-item>
                        <a-descriptions-item label="省">{{ orderDetailInfo.memberAddress[0].province }}
                        </a-descriptions-item>
                        <a-descriptions-item label="市/县">{{ orderDetailInfo.memberAddress[0].city }}
                        </a-descriptions-item>
                        <a-descriptions-item label="区">{{ orderDetailInfo.memberAddress[0].region }}
                        </a-descriptions-item>
                        <a-descriptions-item label="详细地址">
                            {{ orderDetailInfo.memberAddress[0].detailAddress }}
                        </a-descriptions-item>
                    </a-descriptions>
                </a-collapse-panel>
                <a-collapse-panel key="1" :show-arrow="false" header="支付方式">
                    <a-radio-group v-model:value="submitData.payType" button-style="solid">
                        <a-radio-button :value="0">货到付款</a-radio-button>
                        <a-radio-button :value="1">在线支付</a-radio-button>
                    </a-radio-group>
                </a-collapse-panel>
                <a-collapse-panel key="1" :show-arrow="false" header="送货清单">
                    送货清单
                </a-collapse-panel>
                <a-collapse-panel key="1" :show-arrow="false" header="发票信息">
                    发票信息
                </a-collapse-panel>
                <a-collapse-panel key="1" :show-arrow="false" header="使用优惠/礼品卡/抵用">
                    使用优惠/礼品卡/抵用
                </a-collapse-panel>
                <a-collapse-panel key="1" :show-arrow="false" header="金额">
                    <a-form :labelCol="{offset:20}" labelAlign="right">
                        <a-form-item :label="computedTotalCount+' 件商品商品金额,总金额'">
                            {{ orderDetailInfo.total }} ￥
                        </a-form-item>
                        <a-form-item :label="'返现'">
                            - {{ 0.00 }} ￥
                        </a-form-item>
                        <a-form-item :label="'运费'">
                            {{ 2222 }} ￥
                        </a-form-item>
                        <a-form-item :label="'服务费'">
                            {{ 0.00 }} ￥
                        </a-form-item>
                        <a-form-item :label="'退换无忧'">
                            {{ 0.00 }} ￥
                        </a-form-item>
                        <a-form-item :label="'应付总金额'">
                            {{ orderDetailInfo.payPrice }} ￥
                        </a-form-item>
                    </a-form>
                </a-collapse-panel>
            </a-collapse>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>

import CartTopStepsComponent from "@/components/CartTopStepsComponent.vue";
import { computed, onMounted, ref } from "vue";
import { getOrderDetail } from "@/api/order/OrderApi.ts";
import { OrderConfirmsVo } from "@/model/OrderModel.ts";
//面板默认展开数据
const activeKey = ref(["1"]);

//-----------------------------------------------------------------------获取订单详情信息-start
//订单详情信息数据
const orderDetailInfo = ref<OrderConfirmsVo>({
    memberAddress: [
        {
            id: 0,
            memberId: 0,
            name: "",
            phone: "",
            postCode: "",
            province: "",
            city: "",
            region: "",
            detailAddress: "",
            areacode: "",
            defaultStatus: "",
        },
    ],
    cartItems: [
        {
            skuId: 0,
            isCheck: "",
            title: "",
            image: "",
            skuAttrs: [
                "",
            ],
            count: 0,
            price: 0,
            totalPrice: 0,
        },
    ],
    integration: 0,
    total: 0,
    payPrice: 0,
    orderToken: "",
});
/**
 * 获取订单详情信息方法
 */
const getOrderDetailInfo = () => {
    getOrderDetail().then(res => {
        orderDetailInfo.value = res.data[0];
    });
};
//-----------------------------------------------------------------------获取订单详情信息-end

//-----------------------------------------------------------------------订单提交-start
//订单提交数据
const submitData = ref({
    payType: 1,
});
//计算商品数量
const computedTotalCount = computed(() => {
    return orderDetailInfo.value.cartItems.reduce((pre, cur) => {
        return pre + cur.count;
    }, 0);
});
//-----------------------------------------------------------------------订单提交-end

/**
 * 挂载钩子
 */
onMounted(() => {
    //1 获取购物车商品列表
    getOrderDetailInfo();
});
</script>

<style lang="scss" scoped>

</style>